<template>
	<el-dialog v-bind="$attrs" width="80%" style="--el-dialog-padding-primary:0;">
		<template v-slot:header>
			<div class="org-detail-header flex align-center" v-if="rowData.organizationName">
				<div class="logo">
          <PreviewImg :src="rowData.organizationLogo" :showFileList="false"></PreviewImg>
				</div>
				<div class="right-box text-white">
					<div class="label-box flex align-center">
						<span class="text-title f24 text-overflow" style="--overflow-width:400px;--line-clamp:2">{{ rowData.organizationName }}</span>
						<span class="text-title f16">统一信用代码：{{ rowData.creditCode }}</span>
						<div class="text-title f16 fc">
							<span>机构等级：</span>
							<el-rate :model-value="+rowData.organizationLevel" disabled text-color="#ff9900" />
						</div>
					</div>
					<div class="label-box flex align-center">
						<p>
							<span class="text-label">法人：</span>
							<span class="text-value">{{ rowData.legalUserName }} {{ rowData.legalUserPhone }}</span>
						</p>
						<p>
							<span class="text-label">负责人：</span>
							<span class="text-value">{{ rowData.burdenUserName }} {{ rowData.burdenUserPhone }}</span>
						</p>
						<p>
							<span class="text-label">机构详细地址：</span>
							<span class="text-value">{{ rowData.organizationAddress}}</span>
						</p>
					</div>
				</div>
			</div>
		</template>
		<div class="wrapper-box">
			<slot></slot>
		</div>
	</el-dialog>
</template>

<script setup lang="ts">
import PreviewImg from '@/views/aplid/DetailPage/ContentListItem/FileList/PreviewImg/index.vue'

defineProps<{
	rowData?: any
}>()
</script>

<style scoped lang="scss">

.org-detail-header {
	width: 100%;
	height: 244px;
	border-top-right-radius: 1px;
	border-top-left-radius: 1px;
	background: url('@/assets/imgs/dialog-header-bg.png') no-repeat;
	background-size: 100% 100%;
	padding: 60px 30px 10px 30px;
  border-bottom:2px solid #F5F5F5;
	.right-box {
		flex: 1;
		display: flex;
		flex-flow: column;
		height: 100%;
		justify-content: space-around;
		.label-box {
			display: flex;
			gap: 20px;
		}
		.text-label {
			color: rgba(134, 134, 134, 1);
		}
		.text-value {
			color: #000;
		}
	}
	.logo {
		width: 176px;
		height: 176px;
		border-radius: 14px;
		margin-right: 20px;
		.img {
			width: 100%;
			height: 100%;
			border-radius: 14px;
		}
	}
}
</style>
